<template>
  <h3 :style="{ color: titleInfo.color }">{{ titleInfo.value }}</h3>
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
  <ul>
    <li v-for="t in todoList" :key="t.id">
      <span>· {{ t.name }}</span>
      <input type="checkbox" :checked="t.completed" />
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
type Todo = {
  id: number
  name: string
  completed: boolean
}
type TitleInfo = {
  value: string
  color: string
}
export default defineComponent({
  props: {
    titleInfo: {
      type: Object as PropType<TitleInfo>,
      required: true,
    },
  },
  data() {
    return {
      todoName: '',
      todoList: [] as Todo[],
    }
  },
  computed: {},
  methods: {
    newTodo(todoName: string): Todo {
      return {
        id: Date.now(),
        name: todoName,
        completed: false,
      }
    },
    addTodo(todo: Todo): void {
      this.todoList.push(todo)
    },
  },
  created() {
    this.todoList.push({
      id: 1,
      name: 'Hello Vue3 + TS',
      completed: false,
    })
  },
  setup() {},
})
</script>

<style scoped lang="scss">
h3 {
  padding: 5px 10px;
  text-align: center;
}

ul {
  margin: 10px;

  li {
    width: 200px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
